// 获取canvas上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(200, 100); // 将坐标系原点移动到(200, 100)的位置

// 定义时钟半径
const radius = 50; // 外圆半径
const hourTickLength = 10; // 小时刻度线长度
const secondTickLength = 3; // 秒针刻度线长度

// 绘制最外层的蓝色圆
ctx.beginPath();
ctx.arc(0, 0, radius + 5, 0, Math.PI * 2, false);
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgb(48, 96, 161)';
ctx.stroke();

// 绘制小时刻度
for (let i = 0; i < 12; i++) {
  const angle = (i / 12) * Math.PI * 2; // 计算当前刻度的角度（以弧度为单位）
  const x1 = (radius - hourTickLength) * Math.cos(angle);
  const y1 = -(radius - hourTickLength) * Math.sin(angle);
  const x2 = radius * Math.cos(angle);
  const y2 = -radius * Math.sin(angle);

  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineWidth = 3;
  ctx.setLineDash([hourTickLength, 280]); // 设置虚线样式
  ctx.strokeStyle = 'black';
  ctx.stroke();
}

// 清除虚线样式
ctx.setLineDash([]);

// 绘制秒针刻度
for (let i = 0; i < 60; i++) {
  if (i % 5 !== 0) {
    // 跳过已经绘制过的小时刻度
    const angle = (i / 60) * Math.PI * 2; // 计算当前刻度的角度（以弧度为单位）
    const x1 = (radius - secondTickLength) * Math.cos(angle);
    const y1 = -(radius - secondTickLength) * Math.sin(angle);
    const x2 = radius * Math.cos(angle);
    const y2 = -radius * Math.sin(angle);

    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineWidth = 2; // 更细的线条宽度
    ctx.strokeStyle = 'black';
    ctx.stroke();
  }
}
